Web Development lesson plan
Class: 9th to 12th - Lesson: Web Development - Introduction to JavaScript variables, DOM and basic operations

Purpose: To help students learn JavaScript basics, including variables, DOM access, operators and displaying results on a webpage using innerHTML.

No. of Classes

It will take 3 classes. Students strength 1 or 2 combined with single mail ID.

Material Required
  1. Internet Connection
  2. Google Chrome
  3. Mail ID
  4. Code.org(Website)
  5. Online JavaScript Compiler
Curriculum Content

22. Introduction to JavaScript variables, DOM and basic operations

Prior knowledge

Students should recall the lessons from the previous class.


Exercise

Teacher’s Guide before starting the exercises:


  1. Please install VS code for the students for this lesson.

  2. Please use the following links and videos to learn about Variable , Naming rules and video for difference between Var and Let

  3. Please use the following link to learn what is DOM – Click here and Video(DOM)

  4. Please use the following link for operators and datatypes and Video(Operators)

Exercise:1


  1. Students add two numbers and display the result using the DOM.

    2. Exercise:2


  2. Students extend the JavaScript arithmetic operations to include subtraction, multiplication and division.

    3. Exercise:3


  3. Students extend the calculation program with comparison operations.

Solutions:1




Teacher Instruction
  1. Emphasize the words variables, data types, string, number, let, var, const, operators, innerHTML.
  2. Ask students to modify values and observe output changes.
  3. Encourage them to experiment with variables and operators.
  4. Ask students whether we can change the value of a const variable.
  5. 1) let x=”5” +2 + 3;
    let y=2 + 3 + ”5”;
    What are the values of x and y?
    What are their data types?
    Why do x and y produce different results even though they contain the same values?
    2) What will this return?
    Let z = “5” + (2 + 3);
    Where do you think variables and HTML elements in your JavaScript and HTML are stored when you open the HTML page in your browser?